import React from 'react';
import './popconfirm.less';

//todo
class PopConfirm extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'PopConfirm';
        this.state = {
            show:false
        }
    }
    handleShow(){
        this.setState({
            show:true
        })
    }
    handleNO(){
        this.setState({
            show:false
        })
    }
    handleYES(){
        this.setState({
            show:false
        })
        this.props.onConfirm()
    }
    render() {
        return <div className="tederen-popconfirm">
            <span onClick={this.handleShow.bind(this)}>{this.props.children}</span>
            {this.state.show?<div className="popconfirm-wrap">
                <span className="arrow1 ion-android-arrow-dropup">
                    <i className="arrow2 ion-android-arrow-dropup"></i>
                </span>
                <div className="popconfirm-container">
                    <div className="popconfirm-top" >
                        {this.props.title}
                    </div>
                    <div className="popconfirm-bottom">
                        <input type="button" value={this.props.cancelText} onClick={this.handleNO.bind(this)}/>
                        <input type="button" value={this.props.okText} onClick={this.handleYES.bind(this)}/>
                    </div>
                </div>
            </div>:null}
        </div>
    }
}

export default PopConfirm
